<template>
<div class="totalStyle contractinfo_box" v-if="!modelData.showForm">
    <div class="tablestyle">
      <div class="titleStyle">
        <p class="leftTitle font_w">职业健康</p>
        <el-button type="primary"   @click="handleBuild">新建</el-button>
      </div>
      <div class="bottomBox">
        <div class="searchsize">
            <el-col  class="searchBox flex">
                <div>
                    <el-tree-select
                        placeholder="请选择所属组织架构"
                        v-model="modelData.searchValue.deptId"
                        :data="modelData.dropdown.orgIdList"
                        :props = "{
                            children:'children',
                            label:'departmentName'
                        }"
                        node-key = 'id'
                        show-checkbox
                        check-strictly
                        check-on-click-node
                        clearable
                        default-expand-all
                    />
                </div>
              <span class="inputBox  ml-16">
                <el-input maxlength="50"    class="w-10 m-2 mr-16 float-left"
                            v-model="modelData.searchValue.search"
                            placeholder="请输入姓名/手机号"
                            clearable 
                          />
              </span>
              <el-button type="info" plain @click="reset"
                            >重置</el-button> 
                <el-button type="primary" plain class="searchbutton "  @click="queryTableData" >查询</el-button>
            </el-col>
        </div>
        <div class="chartstyle">
          <el-table
            :data="modelData.table.tableData"
            :header-cell-style="{ background: '#F2F5FA' }"     
            border
            style="width: 100%"
          > 
          <el-table-column prop="deptName" label="组织架构" min-width="10%" />
            <el-table-column prop="realName" label="姓名" min-width="10%" />
            <el-table-column prop="phone" label="手机号" min-width="10%" /> 
            <!-- <el-table-column prop="deptName" label="部门" min-width="10%" /> -->
            <el-table-column prop="position" label="职位" min-width="10%" />
            <el-table-column prop="checkNum" label="体检次数" min-width="10%" />
            <el-table-column prop="cultivateSum" label="培训次数" min-width="10%" />
            <el-table-column prop="examSum" label="考试次数" min-width="10%" />
            <!-- <el-table-column prop="jobNum" label="特殊作业次数" min-width="10%" /> -->
            <!-- <el-table-column prop="idCard" label="身份证号" min-width="10%" />
            <el-table-column prop="censusRegister" label="户籍" min-width="10%" />
            <el-table-column prop="areaAddress" label="区内住址" min-width="10%" />
            <el-table-column prop="dormAddress" label="宿舍住址" min-width="10%" />
            <el-table-column prop="webmaster" label="网络员" min-width="10%" /> -->
            <el-table-column label="操作列" width="150" min-width="40%">
              <template #default="scope">
                <span class="buttonFun cursor" @click="handleLook(scope.row)">查看</span>
                <span  class="buttonFun cursor"  @click="handleEdit(scope.$index, scope.row)">编辑</span>  
                  <el-popconfirm 
                    width="520"
                     confirm-button-text="确定"
                    cancel-button-text="取消"
                    @confirm="handleDelete(scope.$index, scope.row)"
                    title="你确定要删除这条数据吗?">
                    <template #reference>
                      <span class="buttonFun cursor">删除</span>
                    </template>
                  </el-popconfirm>
                
              </template>
            </el-table-column>
            <template #empty>
                <el-empty v-loading="modelData.table.tableLoading"></el-empty>
            </template>
          </el-table>
          <div class="demo-pagination-block">
            <el-pagination
              :pageIndex="modelData.table.pageIndex"
              :page-size="modelData.table.pageSize"
              :page-sizes="[5, 10, 15, 20]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="modelData.table.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
</div>
<div class="totalStyle contractinfo_box" v-if="modelData.showForm">
    <Detail v-if="modelData.detail.showDetail" :tableId = 'modelData.detail.tableId'  @callback = 'callback()'></Detail>
    <Dialog v-if="modelData.dialog.dialogFormVisible" :title="modelData.dialog.title" :companyList = 'modelData.dropdown.companyList'  :tableId = 'modelData.detail.tableId' @callback = 'callback()'></Dialog>
</div>
</template>
<script setup>
import Dialog from "./dialog.vue";
import Detail from "./detail.vue";
import { onBeforeMount, watch, getCurrentInstance,onMounted } from "vue";
import { reactive, ref, markRaw } from "vue";
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
import { Delete ,Collection} from "@element-plus/icons-vue";
import store from '@/store'
import { getymd } from "@/utils/auth";
import {  getOccupationalPage as getOccupationalPage, delOccupational as delOccupational} from '@/api/train.js'
// import { getEquipmentListData as getEquipmentListData,getEquipments as getEquipments, delEquipment as delEquipment } from '@/api/device.js'
import { useRouter } from 'vue-router';
import {getDeptTree as getDeptTree} from "@/api/user";
const router = useRouter();
let modelData =  reactive({
    showForm:false,
    searchValue:{
      search :'',
    deptId:''
    },
    dropdown:{
        orgIdList:[] 
      },
    table:{
        tableLoading: false,
        pageIndex: 1,
        pageSize: 10,
        total:0,
        tableData: [{
            contractLevelStr:''
        }],
    },
    detail:{
        showDetail:false,
        dialogTableValue:{}, //查看数据,
        tableId:'',
        title:''
    },
    dialog:{
      title:'编辑',
      dialogTableValue:{},
      dialogFormVisible:false,
      
    },
    rightList:{
      isdelete:false,
      isedit:false,
      isfile:false,
      isadd:false,
      isimport:false
    }
})

const queryTableData = () => {
  modelData.table.tableLoading = true;
  let obj = JSON.parse(JSON.stringify(modelData.searchValue))
  obj.pageIndex = modelData.table.pageIndex
  obj.pageSize = modelData.table.pageSize
  getOccupationalPage(obj)
    .then((res)=>{
      modelData.table.tableLoading = false;
      if(res.code === 200){
        console.log(res)
          let data = res.body;
          modelData.table.tableData=data&&data?data.data:[];
          modelData.table.total = data&&data.total?data.total:0;
        }else{
            ElNotification({
              title: '提示',
              message: res.message?res.message:'服务器异常',
              type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
    })
    .catch(()=>{})
};



//选择部门
const getCompanyListFun = () => {
  getCompanyList().then((res)=>{
    if(res.code === 200){
      modelData.dropdown.companyList = res.body;
    }else{
      ElNotification({
        title: '警告',
        message: res.message?res.message:'服务器异常',
        type: 'warning',
      })
      if(res.code === 100007 ||  res.code === 100008){
        store.dispatch('app/logout')
      }
    }
  })
}
const getDeptTreeFun = () => {
    let id = JSON.parse(localStorage.getItem('userData')).userId;
    getDeptTree(id).then((res) => {
            if(res.code == 200){
              modelData.dropdown.orgIdList = res.body;
            }else {
              ElNotification({
                title: '警告',
                message: res.message?res.message:'服务器异常',
                type: 'warning',
              })
              if(res.code === 100007 ||  res.code === 100008){
                store.dispatch('app/logout')
              }
            }
          });
}
onBeforeMount(()=>{
  getDeptTreeFun()
  // getEquipmentsFun()
})

watch(
    () => modelData.dialog.dialogFormVisible,
    () => {
      if(!modelData.dialog.dialogFormVisible){
        queryTableData();
      }
    },
    { deep: true, immediate: true }
)
//切换一页显示多少条数据
const handleSizeChange = (val) => {
  modelData.table.pageSize = val;
  queryTableData();
};
// 点击跳转到第几页
const handleCurrentChange = (val) => {
  modelData.table.pageIndex = val;
  queryTableData();
};
const reset = () => {
    modelData.searchValue = {}
    queryTableData();
}
//新建
const handleBuild = () => {
  modelData.dialog.title = "新建";
  modelData.showForm = true;
  modelData.dialog.dialogFormVisible = true;
};
//编辑
const handleEdit = (index, row) => {
    modelData.dialog.title = "编辑";
    modelData.detail.tableId = JSON.parse(JSON.stringify(row.id));
    modelData.showForm = true;
    modelData.dialog.dialogFormVisible = true;
    console.log(modelData.dropdown.accidentTypeList)
};
//删除
const handleDelete = (index, row) => {
      delOccupational(row.id).then((res)=>{
        if(res.code === 200){
            if(modelData.table.tableData.length === 0&& modelData.table.pageIndex>1){
              modelData.table.pageIndex = modelData.table.pageIndex -1;
            }
            queryTableData();
            ElMessage({
              type: "success",
              message: "删除成功",
            });
        }else{
            ElNotification({
              title: '提示',
              message: res.message?res.message:'服务器异常',
              type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
      })
};

//查看
const handleLook = (row)=>{
    modelData.detail.tableId = JSON.parse(JSON.stringify(row.id));
    modelData.showForm = true;
    modelData.detail.showDetail = true;
}
const callback = ()=>{
  modelData.showForm = false;
  modelData.dialog.dialogFormVisible = false;
  modelData.detail.showDetail = false;
  modelData.table.pageIndex = 1;
  queryTableData();
}

</script>
<style  lang = 'less' scoped>
.tablestyle {
  position: relative;
  .inputBox{
    :deep(.el-input){
      width: 200px;
    }
  }
  :deep(.el-table__header thead tr) {
    background-color: rgba(64, 158, 255, 0.1);
  }
  :deep(.el-col-3 ){
    max-width: none;
  }
}

.contractinfo_box{
:deep(.el-table--fit){
  height:100%;
}
:deep(.el-table__body-wrapper) {
  overflow-y: auto;
}
.tablestyle {
  position: relative;
  :deep(.el-table__header thead tr) {
    background-color: rgba(64, 158, 255, 0.1);
  }
  :deep(.el-col-3 ){
    max-width: none;
  }
}
:deep(.customer-no-border-table .el-table--border, .el-table--group){
     border: none;
}
.demo-pagination-block {
  margin-top: 16px;
  position: absolute;
  bottom: 32px;
  right: 32px;
}
.buttonFun{
  color: #2E83FC;
  font-size: 14px;
  margin-right: 8px;
}
.sircle{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  
  display: inline-block;
  margin-bottom: 3px;
  }
  .blue{
    background-color: #2E83FC;
  }
  .green{
    background-color: #54B831;
  }
  .origin{
    background-color: #FFB929;
  }
  .origin_deep{
    background-color:#FF9458;
  }
  .red{
    background-color:#F46B5A
  }

.bottomBox{
        padding: 16px;
        height: calc(100% - 48px);
}
}



</style>